<template>
    <div>
        <!--        标题-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><i class="el-icon-edit"></i>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        基本信息-->
        <div class="title_xiao">
            商品基本信息
        </div>
        <div class="biao">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple kuang" label-width="80px">
                        <el-form size="small"
                                 :model="formadd"
                                 label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="formadd.goods_name"
                                          placeholder="请输入商品名称，最多20字" maxlength="20"
                                          clearable
                                          show-word-limit
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述">
                                <el-input type="textarea"
                                          v-model="formadd.goods_desc"
                                          :rows="5"
                                          maxlength="100"
                                          show-word-limit
                                          clearable
                                          placeholder="请输入内容"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light kuang">
                        <el-form :model="formadd"
                                 size="small"
                                 label-width="80px"
                        >
                            <el-form-item label="商品状态">
                                <el-select v-model="formadd.goods_state" placeholder="请选择商品状态">
                                    <el-option label="出售" value="出售"></el-option>
                                    <el-option label="促销" value="促销"></el-option>
                                    <el-option label="售罄" value="售罄"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--        商品图片信息-->
        <div class="title_xiao">
            商品图片信息
        </div>
        <div class="goods_img">
            <!--            首页图-->
            <div class="big_img">
                首页大图
                <upImg @postImg="bigImg" :limit="bigimg" :value="imgData.bigimg" :width="220" :height="220"></upImg>
            </div>
            <!--            详情图-->
            <div class="Detals_big">
                商品详情图
                <upImg @postImg="detailImg" :limit="smallimg" :value="imgData.detailimg"></upImg>
            </div>
        </div>

        <!--        商品规格 销售 浏览表-->
        <div class="title_xiao">
            商品规格信息
        </div>

        <el-table
                size="mini"
                :data="guiGeinfo"
                border
                style="width:100%"
                :cell-style="cell_style"
                :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
                class="guige"
        >
            <el-table-column prop="good_price" label="商品原价（元）">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_price" placeholder="" size="mini"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="goods_discount_price" label="促销价（元）">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_discount_price" placeholder="" size="mini"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="goods_cost_price" label="商品成本价（元）">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_cost_price" placeholder="" size="mini"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="goods_kuaidi" label="快递费（元）">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_kuaidi" placeholder="" size="mini"></el-input>
                </template>

            </el-table-column>
            <el-table-column prop="goods_buy_limit" label="购买数量限制（个）">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_buy_limit" placeholder="" size="mini"></el-input>
                </template>

            </el-table-column>
            <el-table-column prop="goods_stock" label="库存">
                <template slot-scope="scope">
                    <el-input v-model="formadd.goods_stock" placeholder="" size="mini"></el-input>
                </template>

            </el-table-column>
            <el-table-column prop="supplier_name" label="供货商">
                <template slot-scope="scope">
                    <el-input v-model="formadd.supplier_name" placeholder="" size="mini"></el-input>
                </template>

            </el-table-column>
            <el-table-column prop="supplier_phone" label="供货商联系方式" >
                <template slot-scope="scope">
                    <el-input v-model="formadd.supplier_phone" placeholder="" size="mini"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <div class="title_xiao">
            商品浏览信息
        </div>

        <el-table
                size="mini"
                :data="viewinfo"
                border
                style="width:100%"
                :cell-style="cell_style"
                :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
        >
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="historical_visit" label="历史访问总量"></el-table-column>
            <el-table-column prop="today_visit" label="今日访问量"></el-table-column>
            <el-table-column prop="this_week_visit" label="本周访问量"></el-table-column>
            <el-table-column prop="this_month_visit" label="本月访问量"></el-table-column>
            <el-table-column prop="ranking" label="商城排名"></el-table-column>
            <el-table-column prop="ranking_change" label="本周排名变化"></el-table-column>
            <el-table-column prop="conversion" label="转化率"></el-table-column>
        </el-table>


        <div class="title_xiao">
            商品销售信息
        </div>
        <!--        数量/-->
        <el-table
                size="mini"
                :data="saleinfo"
                border
                style="width:100%"
                :cell-style="cell_style"
                :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
        >
            <el-table-column prop="total_sales_order" label="创单总量"></el-table-column>
            <el-table-column prop="history_sales_order" label="总售量"></el-table-column>
            <el-table-column prop="today_sales_order" label="今日销售量"></el-table-column>
            <el-table-column prop="week_sales_order" label="本周销售量"></el-table-column>
            <el-table-column prop="month_sales_order" label="本月销售量"></el-table-column>
            <el-table-column prop="ranking" label="商城排名"></el-table-column>
            <el-table-column prop="ranking_change" label="本周排名变化"></el-table-column>
            <el-table-column prop="refund_count" label="退货数量"></el-table-column>
        </el-table>
        <!--        钱-->

        <el-table
                size="mini"
                :data="moneyinfo"
                border
                style="width:100%"
                :cell-style="cell_style"
                :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
        >
            <el-table-column prop="total_money_sales" label="创单总价格（元）"></el-table-column>
            <el-table-column prop="history_money_sales" label="历史总流水（元）"></el-table-column>
            <el-table-column prop="today_money_sales" label="今日流水（元）"></el-table-column>
            <el-table-column prop="week_money_sales" label="本周总流水（元）"></el-table-column>
            <el-table-column prop="month_money_sales" label="本月总流水（元）"></el-table-column>
            <el-table-column prop="ranking" label="商城排名"></el-table-column>
            <el-table-column prop="ranking_change" label="本周排名变化"></el-table-column>
            <el-table-column prop="refund_count" label="退款金额"></el-table-column>
        </el-table>
        <div class="juzhong">
            <el-button type="primary" size="small" @click="submitEdit">提交修改</el-button>
            <el-button type="danger" size="small" @click="deleteProduct">删除</el-button>
        </div>


    </div>
</template>

<script>
    import bus from "../../bus";
    import upImg from "./updateImg/upImg";
    // import axios from "axios";
    import axios from "../../tool/http";
    import  api from "../../tool/api";

    export default {
        components: {
            upImg
        },
        name: "ProductDetails",
        data() {
            return {
                params: {
                    id: "",
                    //商品信息

                },

                formadd: {

                },
                //规格信息
                guiGeinfo: [

                ],
                //浏览信息
                viewinfo: [],

                //销售信息
                saleinfo: [],
                //钱的信息
                moneyinfo: [],

                //大图张数限制
                bigimg: 1,
                //详情图张数限制
                smallimg: 9,
                imgData: {
                },


            }
        },
        methods: {
            // //以下方法实现表格文字居中
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            //拿到详情页数据
            getDetailData(){
              axios({
                  url:api.getDetails,
                  data:this.params,
                  method:"post"
              }).then(res=>{
                  // console.log(res.data.data)
                  this.formadd=res.data.data[0].guige_info[0]
                  // console.log(this.formadd)
                  this.guiGeinfo=res.data.data[0].guige_info
                  this.imgData=res.data.data[0].imgData
                  // console.log(this.imgData)
                  this.viewinfo=res.data.data[0].view_info
                  this.saleinfo=res.data.data[0].sale_info
                  this.moneyinfo=res.data.data[0].money_info
              })
            },

            //删除商品的方法
            deleteProduct() {
                // this.currentProductData.length === 1 ? this.currentPage = this.currentPage - 1 : this.currentPage
                this.$confirm('确认删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url:api.delete_goods,
                        method: 'delete',
                        data: {id: this.params.id}
                    }).then(res => {
                        // console.log(res.data.code)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',

                            });

                            this.$router.push("/productlist");
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },



            //从上传图片组件那数据
            bigImg(val) {//首页图
                this.imgData.bigimg=val


            },
            detailImg(val) {//详情图
                this.imgData.detailimg=val
                // console.log(this.imgData.detailimg)
            },
            //提交修改
            submitEdit(){
                let submitData={
                    //id
                    id: this.params.id,
                      //基本信息
                    jiben:this.formadd,
                    //规格信息
                    guige:this.guiGeinfo,
                    //图片信息
                    imgData: this.imgData

                }
                this.$confirm('确认提交本次修改?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',

                    type: 'info'
                }).then(() => {
                    axios({
                        url:api.updateData,
                        data:submitData,
                        // method:"update"
                        method:"post"

                    }).then(res=>{
                        // console.log(submitData)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '商品信息修改成功!',
                            });
                            this.$router.push("/productlist");
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '商品信息修改失败，请重试!'
                            });
                        }

                    })

                })

            }


        },
        created() {
            //拿到首页传的id
            bus.$on("getId", (postData) => {
                this.params.id = postData
                // console.log(this.params.id)
            })
            //根据ID获取数据
            this.getDetailData()


        }

    }
</script>

<style scoped lang="less">
    .title_xiao {
        border-bottom: 1px solid #3899FF;
        text-align: left;
        padding: 5px;
        color: #3899FF;
        font-size: 14px;
        margin-top: 10px;
    }

    .biao {
        padding: 20px 0 0 0;
    }

    .kuang {
        width: 70%;
        margin: 0 auto;
    }

    .goods_img {
        display: flex;
        text-align: center;


        .big_img {
            flex: 1;
            border: 5px solid white;
            padding: 10px;
            border-radius: 5px;

        }

        .Detals_big {
            flex: 5;
            border: 5px solid white;
            padding: 10px;
            border-radius: 5px;
            margin-left: 20px;

        }
    }
    .juzhong{
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
    }
    .guige{
        .el-input{
            border: none;
            outline: none;

        }
    }
</style>